<template>
	<!-- 底部购物车栏 -->
	<div class="fixed-bottom " :class="{ 'fixed-bottom-60': shoplist == 1 }">
		<!-- 快速下单/采购中心商品详情购物车 -->
		<div v-show="carType === 'quickPlaceOrder' || carType === 'purchase'" class="flex-fe-c bottom-box pr-250 pl-150">
			<!-- <div class="bg-white pos-a is-92 shop-cart-out">
				<div class="shop-cart-in pos-a bg-primary is-80 flex-center">
					<svg-icon icon-class="car-new" class="color-white fs-40" @goPage="showCartList" />
					<div class="pos-a shop-cart-num">{{ totalAmount }}</div>
				</div>
			</div> -->
			<!-- <p class="fs-28">共<span class="color-primary"><b class="fs-36">{{ totalAmount }}</b>件</span></p> -->
			<button class=" bg-primary color-white btn fs-28" @click="submitBuy">确定</button>
		</div>

		<!-- 购物车列表弹窗(快速下单页面) -->
		<div v-show="showList" class="cart-popup">
			<div class="cart-shadow" @click.stop="hiddenCartList" />
			<div class="cart-list-box">
				<div class="cart-tle flex-s-c color-gray-light fs-26">
					<p>共<span class="color-primary">{{ totalAmount }}</span>件商品</p>
					<p class="flex-center" @click="cleanCart">
						<svg-icon icon-class="clean" class="pr-10 fs-40" />
						<span>清空购物车</span>
					</p>
				</div>
				<ul class="plr-25 cart-list">
					<li v-for="(item, index) in cartList" :key="index" class="cart-item flex-s-c hb">
						<p class="text-show-line-2 flex-1">{{ item.V_Title }}</p>
						<div class="flex-s-0 ml-50 cart-spec">
							<p class="color-primary">￥{{ parseFloat(Number(item.V_GradePrice * item.Ratio).toFixed(2)) }} / {{
								item.RatioUnit }}</p>
							<p class="color-gray-light" v-if="item.V_AttributeNameValue">{{ item.V_AttributeNameValue.slice(0, -1) }}
							</p>
						</div>
						<div class="flex-fe-c flex-s-0 ml-50">
							<svg-icon icon-class="delete-3" class="color-primary fs-42 " :class="item.Amount <= 0 ? 'opacity-1' : ''"
								@goPage="changeAmount(item, item.Amount, item.Stock, -1, item.MinimumOrder, item.AddNum)" />
							<div class="btn-input-box">
								<input v-model="item.Amount" type="number" class="btn-input"
									@blur="changeAmount(item, item.Amount, item.Stock, 0, item.MinimumOrder, item.AddNum)">
							</div>
							<svg-icon icon-class="add-1" class="color-primary fs-42"
								:class="(item.Amount >= item.Stock && switch7 !== 1) ? 'opacity-1' : ''"
								@goPage="changeAmount(item, item.Amount, item.Stock, 1, item.MinimumOrder, item.AddNum)" />
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
import { GetBusinessFunction } from 'api/businessSetting'
import { DeleteUserCar, AddOrUpdateAmount, AddOrEditUserCarList } from 'api/product'
export default {
	name: 'ShopCart',
	components: {
	},
	props: {
		carType: {
			type: String,
			required: false,
			default: 'quickPlaceOrder'
		},
		tel: {
			type: String,
			required: false,
			default: ''
		},
		storeId: {
			type: String,
			required: false,
			default: ''
		},
		shoplist: {
			type: Number,
			required: false,
			default: 0
		},
		postType: {
			type: Number,
			required: false,
			default: 0
		},
		carList: { // 购物车列表
			type: Array,
			required: false,
			default: function () {
				return []
			}
		},
		productList: { // 购物车列表
			type: Array,
			required: false,
			default: function () {
				return []
			}
		},
		shopData: { // 商品详情
			type: Object,
			required: false,
			default: function () {
				return {}
			}
		},
		addressId: {
			type: Number,
			required: false,
			default: 0
		},
		ActivityData: {
			// 数据
			type: Object,
			required: false
		},
		switch7: {
			type: Number,
			required: false,
			default: 0
		},
		isQucikOrder: {
			type: Boolean,
			required: false
		},
	},
	data() {
		return {
			showList: false,
			cartList: [],
			totalMoney: 0,
			totalAmount: 0,
			cartRequestList: [],
			periodicBuyEnlabled: true,
			switch203: 0


		}
	},
	watch: {
		carList(newVal, oldVal) {
			this.cartList = newVal
			this.totalMoney = this.getTotalMoney()
			this.totalAmount = this.getTotalAmount()
		}
	},
	computed: {
		GradePrice_1() {
			let _price = 0
			if (this.shopData && this.shopData.V_GradePrice) {
				if (this.shopData.scale) {
					_price = (this.shopData.V_GradePrice * this.shopData.scale).toFixed(2).split('.')[0]
				} else {
					_price = this.shopData.V_GradePrice.toFixed(2).split('.')[0]
				}

			}
			return _price
		},
		GradePrice_2() {

			let _price = 0
			if (this.shopData && this.shopData.V_GradePrice) {
				_price = this.shopData.V_GradePrice.toFixed(2).split('.')[1]
			}
			return _price
		},
		periodicBuyBtnText() {

			let _periodicBuyBtnText = this.shopData.ActivityPrice > 0 ? '周期购买' : '免费领取'
			console.log(this.ActivityData)
			var waitDays = Math.ceil((this.$utils.ParseDate(this.ActivityData.NextBuyTime) - new Date()) / 1000 / 60 / 60 / 24);
			if (waitDays > 0) {
				_periodicBuyBtnText = waitDays + "天后可" + (this.shopData.ActivityPrice ? "购买" : "领取");
				this.periodicBuyEnlabled = false;
			}
			return _periodicBuyBtnText
		},
	},
	created() {
		this.cartList = this.carList
		this.totalMoney = this.getTotalMoney()
		this.totalAmount = this.getTotalAmount();
		this.GetBusinessFunction()
	},
	methods: {
		GetBusinessFunction() {
			GetBusinessFunction(203).then(res => {
				if (res) {
					this.switch203 = res.Data[0].Value;
				}
			})
		},
		// 展示/隐藏购物车列表
		showCartList() {
			this.showList = !this.showList
		},
		hiddenCartList() {
			console.log('隐藏')
			this.showList = false
		},
		changeAmount(item, num, stock, type, MinimumOrder, AddNum) {
			console.log(item, "0604")
			const _oldAmount = item.Amount
			this.$utils.changeAmount(item, num, stock, type, MinimumOrder, 1, item.oLimitBuy, this.switch7, AddNum)
			if (_oldAmount !== item.Amount || type === 0) {
				const _obj = {}
				_obj.ProductId = item.ProductId
				_obj.Amount = item.Amount
				_obj.SkuId = item.SkuId
				_obj.Ratio = item.Ratio
				_obj.RatioUnit = item.RatioUnit
				if (this.shoplist == 1) {
					_obj.Source = 1
				}
				if (this.storeId || this.storeId === '0') {
					_obj.StoreId = this.storeId
				}
				this.cartRequestList = []
				this.cartRequestList.push(_obj)
				this.AddOrUpdateAmount(item.Amount)
			}
			item.TotalMoney = item.Amount * item.V_GradePrice * item.Ratio
			this.totalMoney = this.getTotalMoney()
			this.totalAmount = this.getTotalAmount()
		},
		showSpec() {
			//this.$emit('showSpec',this.shopData.ActivityType)  //非周期购和拼团时不传活动类型 按钮显示购物车和立即购买
			this.$emit('showSpec')
		},
		GroupSpec() {
			if (!this.periodicBuyEnlabled) {
				return
			}
			this.$emit('showSpec', this.shopData.ActivityType)
		},
		// 计算总额
		getTotalMoney() {
			let totalMoney = 0
			this.cartList.forEach(item => {
				totalMoney += item.TotalMoney
			})
			return totalMoney.toFixed(2)
		},

		// 计算总数量
		getTotalAmount() {
			let totalAmount = 0
			this.cartList.forEach(item => {
				totalAmount += parseInt(item.Amount)
			})
			return totalAmount
		},
		// 结算
		submitBuy() {
			console.log(this.productList)
			let productList = []
			this.productList.forEach(item =>{
				if(item.selectAll){
					item.ProductSkuList.forEach(sub =>{
						productList.push(sub.ID)
					})
				}else{
					item.ProductSkuList.forEach(sub =>{
						if(sub.isSelected){
							productList.push(sub.ID)
						}
					})
				}
			})
			console.log(productList)
			localStorage.setItem('customerProductList', JSON.stringify(productList));

			// let customerProductList = JSON.parse(localStorage.getItem('customerProductList'));
			// if (!customerProductList || customerProductList.length == 0) {
			// 	this.$toast('没有选中商品！')
			// 	return false
			// }else{
				this.$router.replace({ path: '/customer' });
			// }
				
		},
		// 去购物车页面
		goCart() {
			if (this.isQucikOrder) {
				window.location.href = this.$LocalDomain + '/m/user/car';
			} else if (this.storeId) {
				window.location.href = this.$LocalDomain + '/m/retail/Car';
			} else {
				if (this.switch203 == 1) {
					window.location.href = this.$LocalDomain + '/m/supplier/Car';
				} else {
					window.location.href = this.$LocalDomain + '/m/user/car';
				}
			}
		},

		// 清空购物车
		cleanCart() {
			let _ids = ''
			this.cartList.forEach((item, index) => {
				if (index === this.cartList.length - 1) {
					_ids += item.ID
				} else {
					_ids += item.ID + ','
				}
			})
			this.DeleteUserCar(_ids)
		},

		// 批量删除购物车商品api
		DeleteUserCar(ids) {
			DeleteUserCar({ ids }).then(res => {
				if (res) {
					console.log(res)
					this.$toast.success('删除成功')
					this.showList = false
					this.$emit('cleanCart')
				}
			})
		},

		// 更新购物车
		AddOrUpdateAmount(amount) {
			if (this.storeId) {
				let param = {}
				param.list = this.cartRequestList
				AddOrEditUserCarList(param).then(res => {
					if (res) {
						console.log(res)
						// this.showList = false
						let _update = false
						if (amount === 0) {
							_update = true
						}
						this.$emit('updateCart', _update)

					}
				})
			} else {
				AddOrUpdateAmount(this.cartRequestList).then(res => {
					if (res) {
						// this.showList = false
						let _update = false
						if (amount === 0) {
							_update = true
						}
						this.$emit('updateCart', _update)
					}
				})
			}

		}
	}
}
</script>
<style lang="scss" scoped>
.bottom-box {
	position: relative;
	background: $colorF;
	height: 130px;
	z-index: 2;

	.shop-cart-out {
		border-radius: 100%;
		left: 54px;
		top: -20px;
		overflow: visible;

		.shop-cart-in {
			border-radius: 100%;
			left: 6px;
			top: 6px;
			overflow: visible;

			.shop-cart-num {
				font-size: 22px;
				line-height: 30px;
				padding: 0 10px;
				border-radius: 15px;
				color: $colorF;
				background: $red;
				top: 0;
				left: 60px;
				z-index: 12;
			}
		}
	}

	.shop-cart-out2 {
		left: 54px;
		overflow: visible;

		.shop-cart-in {
			left: 6px;
			top: 6px;
			overflow: visible;

			.shop-cart-num {
				font-size: 22px;
				line-height: 30px;
				padding: 0 8px;
				border-radius: 50px;
				color: $colorF;
				background: #FE5128;
				top: 0;
				left: 60px;
				z-index: 12;
			}
		}
	}

	.btn {
		position: absolute;
		right: 23px;
		top: 25px;
		width: 220px;
		line-height: 80px;
		border-radius: 40px;
		text-align: center;
	}

	.cart-num {
		position: absolute;
		font-size: 18px;
		line-height: 20px;
		padding: 0 5px;
		border-radius: 10px;
		color: $colorF;
		@include bg-primary;
		top: -5px;
		left: 36px;
		z-index: 12;
	}

	.left-btn,
	.right-btn {
		width: 238px;
		width: 50%;
		display: inline-block;
		border-radius: 40px 0 0 40px;
		vertical-align: text-bottom;
	}

	.right-btn {
		border-radius: 0 40px 40px 0;
	}
}

.bottom-box-1 {
	height: 120px;

	.btn {
		top: 20px;
	}
}

.cart-popup {
	position: absolute;
	z-index: 1;
	bottom: 0;
	left: 0;
	height: 100vh;
	width: 100vw;

	.cart-shadow {
		height: 100%;
		width: 100%;
		background: $colorOverlay;
	}

	.cart-list-box {
		position: absolute;
		background: #fff;
		width: 100%;
		left: 0;
		bottom: 130px;
		border-radius: 20px 20px 0 0;

		.cart-tle {
			background: $colorF4;
			height: 80px;
			border-radius: 20px 20px 0 0;
			padding: 0 25px;
		}

		.cart-list {
			max-height: 50vh;
			overflow: auto;
			position: relative;

			.cart-item {
				padding: 30px 0;

				.cart-spec {
					width: 200px;
				}

				.btn-input-box {
					position: relative;
					margin: 0 4px;

					.btn-input {
						position: relative;
						z-index: 1;
						height: 56px;
						width: 50px;
						line-height: 1;
						border: none;
						text-align: center;
					}
				}
			}
		}
	}
}

.checkbox {
	padding-left: 75px;
	padding-right: 75px;

	&:before {
		left: 23px;
	}

	&:after {
		left: 35px;
	}
}

.tel-text {
	@include bg-primary;
	border-radius: 40px;
}

.fixed-bottom-60 {
	bottom: 120px;
}

.fixed-bottom {
	box-shadow: 0px -3px 38px 0px rgba(0, 0, 0, 0.1);
}

.flex-column {
	display: flex;
	flex-direction: column;
	height: 100%;
	height: 80px;

	span {
		height: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}
</style>
